@import 'variables';

@mixin open-menu() {
  width: 250px;

  .menu {
    /deep/ app-nav-item,
    /deep/ app-nav-input-item {
      .nav-item {
        .text {
          opacity: 1;
        }
      }
    }

    /deep/ app-collapsible {
      .collapsible-head {
        .text {
          opacity: 1;
        }
      }
    }

    /deep/ app-nav-divider {
      .title {
        .text {
          opacity: 1;
        }

        &:before {
          max-width: 10px;
          margin-right: 3px
        }

        &:after {
          display: block;
        }
      }
    }
  }

  @media (min-width: 1380px) {
    width: 300px;
  }
}

:host {
  &.open {
    .sidebar {
      @include open-menu();
    }
  }

  .column {
    height: calc(100vh);
  }

  .sidebar {
    width: 95px;
    overflow: hidden;
    transition: width 0.4s ease;

    .menu {
      min-width: 250px;
      padding-left: 15px;
      height: calc(100vh);
      top: -75px;
      position: relative;
      padding-top: 75px;
      padding-bottom: 20px;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
    }

    .cloud-player {
      background: rgba(250, 250, 250, 0.9);
      padding: 0;
      text-align: center;
      margin: 15px 15px 0 15px;
      height: 60px;
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 58px;
      }

      app-cloud-player-logo {
        display: block;
        height: 50px;
        width: 50px;
        margin-top: 3px;
      }
    }

    .footer {
      position: fixed;
      bottom: 0;
      width: inherit;
      color: #cbcbcb;
      background: #efefef;
      padding: 2px 15px;
      white-space: nowrap;

      a {
        color: #aaa;
        text-decoration: underline;

        &:hover {
          color: $brand-primary;
        }
      }
    }

    .playlists {
      margin-top: 10px;

      .playlist {
        &.drag-over {
          position: relative;

          /deep/ app-nav-item {
            .text {
              color: $brand-primary !important;
            }
          }

          &:after {
            content: '';
            position: absolute;
            width: 100%;
            height: 33px;
            background: #ddd;
            left: 0;
            top: -7px;
            z-index: -1;
          }
        }
      }
    }

    /deep/ app-collapsible {
      .collapsible-head {
        padding: 0 10px 0 5px;
        margin-top: 0;
        color: $gray-light;

        .text {
          text-transform: uppercase;
          font-weight: 200;
          font-size: 11px;
        }

        .icon {
          width: 20px;
          font-size: 11px;
          text-align: center;
          margin-right: 5px;
        }
      }

      .collapsible-body {
        //padding-left: 5px;
      }

      .nav-item {
        &:first-child {
          margin-top: 0;
        }
      }
    }

    @media (min-width: $screen-lg-min) {
      width: 250px;
    }

    @media (min-width: $screen-sm-max) and (max-width: $screen-lg-min) {
      .menu {
        padding-left: 30px;

        /deep/ app-nav-item,
        /deep/ app-nav-input-item,
        /deep/ app-collapsible {
          .text {
            transition: opacity 0.6s ease;
          }
        }

        /deep/ app-collapsible {
          .collapsible-head {
            .text {
              opacity: 0;
            }
          }
        }
      }

      &:hover {
        @include open-menu();
      }
    }

    @media (min-width: 1380px) {
      width: 300px;
      &:hover {
        width: 300px;
      }
    }
  }

  @media (max-width: $screen-sm-max) {
    width: 100vw;
    position: fixed;
    bottom: 0;
    height: 40px;
    background: $light-white;
    box-shadow: $light-boxshadow;
    z-index: 999;

    .menu {
      top: initial !important;
      padding-top: initial !important;
      padding-bottom: initial !important;
      height: 40px !important;

      > nav {
        display: flex;
        height: 100%;
      }
    }

    .account{
      display: flex;
      width: 75%;
      display: contents;
    }

    .playlists {
      display: none;
    }

    .footer {
      display: none;
    }

    .sidebar {
      min-width: 100%;
      padding: 0;

      .menu {
        min-width: 100%;
        padding-left: 0;
      }

      .divider,
      .cloud-player {
        display: none;
      }

      .user {
        order: 4;
      }

      nav {
        display: flex;
        font-size: 13px;
        margin: 0;

        app-nav-divider {
          display: none;
        }
      }
    }
  }
}
